<template>
  <div ref="listRef" class="chat-message-list flex-1 overflow-y-auto px-4 py-2">
    <div v-for="msg in messages" :key="msg.id" class="mb-3 flex" :class="{'flex-row-reverse': msg.isSelf}">
      <img :src="msg.avatar" class="w-8 h-8 rounded-full mx-2" />
      <div>
        <div class="text-xs text-gray-500 mb-1">
          <span>{{ msg.name }}</span>
          <span class="ml-2">{{ formatTime(msg.time) }}</span>
        </div>
        <div class="bg-white px-3 py-2 rounded shadow max-w-xs break-words" :class="msg.isSelf ? 'bg-blue-50' : ''">
          {{ msg.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, computed } from 'vue'
import { useChatStore } from '@/stores/chatStore'
const chatStore = useChatStore()
const listRef = ref(null)
const messages = computed(() => chatStore.activeSessionMessages)

watch(messages, async () => {
  await nextTick()
  if (listRef.value) {
    listRef.value.scrollTop = listRef.value.scrollHeight
  }
}, { deep: true })

function formatTime(time) {
  const d = new Date(time)
  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}
</script>

<style scoped>
.chat-message-list {
  background: #f5f7fa;
}
</style> 